<template>
  <div class="dd">
    <my-header title="订单"></my-header>
    <div class="main">
      <div class="mc">
        <img src="//fuss10.elemecdn.com/f/18/9fb04779371b5b162b41032baf5f3gif.gif">
        <p>登录后查看外卖订单</p>
        <button>
          立即登录
        </button>
      </div>
    </div>

    <my-footer></my-footer>
  </div>
</template>

<script>
import myHeader from '@/components/myHeader'
import myFooter from '@/components/myFooter'
export default {
  components: {
    myHeader,
    myFooter
  }
}
</script>

<style lang="less">
.pxToRem(@p,@px){
    @{p}: @px / 75 * 1rem;
}
.dd{
  .main{
    background: #f5f5f5;
    position: fixed;
    width: 100%;
    height: 100%;
    .mc{
      display: flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      position: fixed;
      left: 50%;
      top: 40%;
      transform:translate(-50%,-50%);
      p{
        text-align: center;
        color: #6a6a6a;
        .pxToRem(font-size,32);
      }
      button{
        .pxToRem(margin-top,20);
        background: #56d176;
        .pxToRem(width,240);
        .pxToRem(height,80);
        color: #fff;
        .pxToRem(font-size,28);
        .pxToRem(border-radius,4);
        outline: none;
        border:none;
      }
    }
  }
}

</style>
